<template>
  <div class="fixed top-0 left-0 w-full">
    <header class="px-6 pt-3 pb-2 flex justify-between align-middle">
      <span class="animated-background inline-block title"></span>
      <span class="animated-background inline-block icon"></span>
    </header>
    <div class="px-6 py-2 w-full">
      <span class="animated-background inline-block search"></span>
    </div>
    <div class="px-6 py-2 w-full">
      <span class="animated-background inline-block banner"></span>
    </div>
    <div class="list-card px-6 w-full">
      <div class="py-5 top flex justify-between align-middle">
        <span class="animated-background inline-block title"></span>
        <span class="animated-background inline-block more"></span>
      </div>
      <div class="content flex overflow-hidden">
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
      </div>
    </div>

    <div class="list-card px-6 w-full">
      <div class="py-5 top flex justify-between align-middle">
        <span class="animated-background inline-block title"></span>
        <span class="animated-background inline-block more"></span>
      </div>
      <div class="content flex overflow-hidden">
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
      </div>
    </div>

    <div class="list-card px-6 w-full">
      <div class="py-5 top flex justify-between align-middle">
        <span class="animated-background inline-block title"></span>
        <span class="animated-background inline-block more"></span>
      </div>
      <div class="content flex overflow-hidden">
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
        <div class="book flex flex-col mr-4">
          <span class="animated-background inline-block cover mb-2"></span>
          <span class="animated-background inline-block name"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  height: 26px;
  width: 140px;
}
.icon {
  height: 26px;
  width: 26px;
}
.search {
  height: 34px;
  width: 100%;
  background-color: #f7f8fa;
  border-radius: 99px;
}
.banner {
  height: 140px;
  width: 100%;
  background-color: #f7f8fa;
  border-radius: 8px;
}

.list-card {
  margin-bottom: 10px;
  .top {
    .title {
      width: 72px;
      height: 24px;
    }

    .more {
      width: 32px;
      height: 24px;
    }
  }
  .content {
    .book {
      .cover {
        height: 100px;
        width: 70px;
      }
      .name {
        height: 12px;
        width: 60px;
      }
    }
  }
}
.animated-background {
  background: rgb(194, 207, 214);
  animation-duration: 1.5s;
  animation-name: blink;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
</style>
